<template>
    <p>{{ msg }}</p>
    <button @click="increment">您点击了:{{ count }}次</button>
</template>
<script>
// 导入ref函数,ref函数用于声明响应式状态
// 简单来讲:用于定义数据
import { ref } from 'vue';
export default {
    // setup函数是在组件中使用的组合式API的入口,通常只在以下场景中使用
    // 1.需要在非单文件组件中使用组合式API
    // 2.需要再给予选项式API的组件中集成给予组合式API的代码
    setup(){
        const msg = ref("Hello Vue")
        // 无法直接修改msg的值
        // msg = ref("Hello World") // 报错
        // 如果想要修改,必须通过.value表示修改ref对象的数据
        msg.value = ref("Hello World")
        const count = ref(0)

        function increment(){
            count.value++
        }

        return{
            msg,
            count,
            increment
        }
    }
}
</script>